﻿@page "/circular-gauge/semi-circular-gauge"

@using Syncfusion.Blazor.CircularGauge
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample visualizes the rendering of the circular gauge with modified start and end angles. The radius, start angle, end angle, and the center position of the circular gauge can be customized using the options in the properties panel.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render the circular gauge with modified start and end angles to form the semi or quarter circular gauges. By enabling the <b>radius based on angle</b> option, the radius of circular gauge will be calculated based on the start and end angles.</p>
   <p>More information on the circular gauge can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/user-interaction'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
        <SfCircularGauge CenterX="@GaugeCenterX" CenterY="@GaugeCenterY" MoveToCenter="@GaugeMoveToCenter">
            <CircularGaugeAxes>
                <CircularGaugeAxis HideIntersectingLabel="@HideLabelCheck" StartAngle="@GaugeStartAngle" EndAngle="@GaugeEndAngle" Minimum="0" Maximum="100" Radius="@GaugeRadius">
                    <CircularGaugeAxisLineStyle Width="0.01" Color="#0450C2"/>
                    <CircularGaugeAxisLabelStyle Position="Syncfusion.Blazor.CircularGauge.Position.Outside" AutoAngle=true>
                        <CircularGaugeAxisLabelFont FontWeight="Normal"/>
                    </CircularGaugeAxisLabelStyle>
                    <CircularGaugeAxisMajorTicks Position="Syncfusion.Blazor.CircularGauge.Position.Inside" Width="2" Height="12" Interval="4"/>
                    <CircularGaugeAxisMinorTicks Position="Syncfusion.Blazor.CircularGauge.Position.Inside" Height="5" Width="1" Interval="2"/>
                    <CircularGaugePointers>
                        <CircularGaugePointer Value="30" Radius="75%" Color="#FF9200" PointerWidth="7">
                            <CircularGaugePointerAnimation Enable=false/>
                            <CircularGaugeCap Radius="8" Color="#565656">
                                <CircularGaugeCapBorder Width="0"/>
                            </CircularGaugeCap>
                            <CircularGaugeNeedleTail Length="13%" Color="#FF9200"/>
                        </CircularGaugePointer>
                    </CircularGaugePointers>
                </CircularGaugeAxis>
            </CircularGaugeAxes>
        </SfCircularGauge>
    </div>
<div class="col-md-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table title="Properties" style="width: 100%">
                <tr>
                    <td>
                        <div>Start Angle <span class="value">@GaugeStartAngle°</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" value="@GaugeStartAngle" min="0" max="360" @onchange="StartSlider"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>End Angle<span class="value">@GaugeEndAngle°</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" value="@GaugeEndAngle" min="0" max="360" @onchange="EndSlider"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Radius <span class="value">@SliderRadius%</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" value="@SliderRadius" min="30" max="100" @onchange="RadiusSlider"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="property-text">Radius based on angle</div>
                    </td>
                    <td>
                        <div>
                            <SfCheckBox ValueChange="@RadiusAngleCheckbox" Checked="@GaugeMoveToCenter" TChecked="bool"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Center X <span class="value">@CenterxSlider%</span> </div>
                    </td>
                    <td>
                        <div>
                            <input disabled="@CenterSliderEnable" type="range" value="@CenterxSlider" min="0" max="100" @onchange="CenterxSliderChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Center Y <span class="value">@CenterySlider%</span> </div>
                    </td>
                    <td>
                        <div>
                            <input disabled="@CenterSliderEnable" type="range" value="@CenterySlider" min="0" max="100" @onchange="CenterySliderChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="property-text">Hide intersecting label</div>
                    </td>
                    <td>
                        <div>
                            <SfCheckBox ValueChange="@LabelCheck" Checked="@IntersectLabelChecked" TChecked="bool"/>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<style>
    .value{
        margin-left:10px;
    }
    tr{
      height: 40px;  
    }
    td {
        width:50%;
    }
</style> 
@code{
    private double GaugeStartAngle = 270;
    private double GaugeEndAngle = 90;
    private string GaugeRadius = "80%";
    private double SliderRadius = 80;
    private string GaugeCenterX = "50%";
    private string GaugeCenterY = "50%";
    private double CenterxSlider = 50;
    private double CenterySlider = 50;
    private bool GaugeMoveToCenter = false;
    private bool IntersectLabelChecked = true;
    private bool HideLabelCheck = true;
    private bool CenterSliderEnable = false;
    private void RadiusAngleCheckbox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        GaugeMoveToCenter = args.Checked;
        if (GaugeMoveToCenter) {
            GaugeCenterX = GaugeCenterY = null;
        }
        else {
            GaugeCenterX = CenterxSlider.ToString() + "%";
            GaugeCenterY = CenterySlider.ToString() + "%";
        }
        CenterSliderEnable = GaugeMoveToCenter;
    }
    private void LabelCheck(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        IntersectLabelChecked = args.Checked;
        HideLabelCheck = IntersectLabelChecked;
    }
    private void StartSlider(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        GaugeStartAngle = Convert.ToDouble(args.Value);
    }
    private void EndSlider(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        GaugeEndAngle = Convert.ToDouble(args.Value);
    }
    private void RadiusSlider(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        GaugeRadius = (args.Value.ToString() + "%");
        SliderRadius = Convert.ToDouble(args.Value);
    }
    private void CenterxSliderChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        GaugeCenterX = (args.Value.ToString() + "%");
        CenterxSlider = Convert.ToDouble(args.Value);
    }
    private void CenterySliderChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        GaugeCenterY = (args.Value.ToString() + "%");
        CenterySlider = Convert.ToDouble(args.Value);
    }
}
